<template>
  <div class="list-content">
    <el-form :inline="true" :model="formInline" class="demo-form-inline" @submit.native.prevent>
      <el-form-item v-if="isMuilUnitUser">
        <el-select filterable @change="getStatis()" v-model="formInline.orgIds" placeholder="请选择业主单位">
          <el-option
            v-for="item in orgOptions"
            :key="item.organizationId"
            :label="item.shortName"
            :value="item.organizationId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="formInline.time"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="util.intTimePickerOptions()"
          @change="getStatis()"
          >
        </el-date-picker>
      </el-form-item>
      <el-form-item v-if="!isMuilUnitUser">
        <el-select filterable @change="getStatis()" v-model="formInline.planId" placeholder="请选择巡检计划">
          <!-- <el-option label="巡检计划" value=""></el-option> -->
          <el-option
            v-for="item in planOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button class="form-search-btn" type="primary" @click="getStatis()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row v-loading="loading">
      <!-- 单单位 -->
      <el-col :span="24" v-if="!isMuilUnitUser">
        <div class="grid-content">
          <div class="chart-heaad">巡检完成情况</div>
          <div id="finishRate_inspect" class="chart-content"></div>
          <div id="inspectorRate_inspect" class="chart-content"></div>
        </div>
      </el-col>
      <el-col :span="24" v-else>
        <div class="grid-content">
          <div class="chart-heaad">巡检分析</div>
          <div id="finishRate_inspectTop" style="height: 654px;" class="chart-content"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { qnToken} from '@/api/api'
import * as Dao from '@/api/inspect'
import { getOrgList} from '@/api/org'
import util from '@/utils/util'

export default {
  name: 'InspectionAnalysis',
  props:['param'],
  data () {
    return {
      freashStaticFlag:0,
      formInline: {
        orgIds:this.$store.state.userinfo.isMuilUnitUser ? this.$store.state.userinfo.organizationIds : this.$store.state.userinfo.org.id,
        time:'',
        planId:''
      },
      util:util,
      isMuilUnitUser:this.$store.state.userinfo.isMuilUnitUser,
      accountName:this.$store.state.userinfo.accountName,
      orgOptions: [{organizationId: this.$store.state.userinfo.organizationIds,shortName: "全部业主单位"}],
      planOptions: [],
      loading: false,
      colorList:[
                  '#70bbea','#5c90d2','#a58ad4','#f3b75e','#ea4f63',
                   '#16adc4','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                   '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                ]
    }
  },
  created:function() {
    //默认一个月
    let end = new Date();
    let start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
    this.formInline.time = [util.ilinkTimeformat.format(start, 'yyyy-MM-dd ')+'00:00:00', util.ilinkTimeformat.format(end, 'yyyy-MM-dd ')+'23:59:59']
    //绑定下拉框
    if(this.isMuilUnitUser){
      getOrgList({queryType: 0}).then((data)=>{
        this.orgOptions.push.apply(this.orgOptions,data.data);
      })
      this.getStatis()
    }else{
      Dao.getInspectPlanList({
        queryType:0,
        orgIds :this.formInline.orgIds,
      }).then((data)=>{
        if(data.data && data.data.length>0){
          this.planOptions.push.apply(this.planOptions,data.data);
          this.formInline.planId = data.data[0].id
        }
        this.getStatis()
      })
    }
  },
  methods: {
    getStatis() {
      let that = this
      that.loading = true
      if(!that.isMuilUnitUser){
        Dao.getTimeCycleStatisticsForClient({
          orgIds: that.formInline.orgIds,
          timeType: 13,
          planId: that.formInline.planId,
          startTime: that.formInline.time?(that.formInline.time[0].split(' ')[0]+' 00:00:00'):'',
          endTime: that.formInline.time?(that.formInline.time[1].split(' ')[0]+' 23:59:59'):'',
          timeCycle: 3,
          sortType: 1
        }).then((data)=>{
            let xData = []
            let toolTipData = []
            let yData = []
            let Average = 0
            let Sum = 0
            let Min = 100
            let Max = 0
            $.each(data.data,(index,obj)=>{
              let _finishPercent = parseFloat(obj.finishPercent) 
              xData.push( util.ilinkTimeformat.format(new Date(obj.hourTime),'M.dd'))
              toolTipData.push( obj.dayTime)
              yData.push(_finishPercent)
              Sum+=_finishPercent
              if(Max<_finishPercent){
                Max=_finishPercent;
              } 
              if(Min>_finishPercent){
                Min=_finishPercent;
              } 
            })
            Average = data.data.length==0?0:(Sum/data.data.length)
            //画图
            let option_echart = {
              title: {
                  textStyle: { color: '#2F3444', fontSize: '16' },
                  y: 'left',
                  left: '35',
                  top: '0',
                  text: '日巡检任务完成率(%)',
              },
              grid: {
                  left: '55px',
                  right: '55px',
              },
              tooltip: {
                trigger: 'axis',
                formatter:function(params){
                  return (toolTipData[params[0].dataIndex]+'<br/>'+ params[0].data+'%')
                }
              },
              xAxis: {
                  type: 'category',
                  axisTick: { show: false },
                  boundaryGap: false,
                  axisLine: {
                      show: true,
                      lineStyle: {
                          color: 'rgba(105, 115, 125, 0.3)',
                          width: 1, //这里是为了突出显示加上的
                          type:'dotted'
                      }
                  },
                  axisLabel: {
                      show: true,
                      textStyle: {
                          color: 'rgba(95, 104, 132, 1)',
                          fontSize: 16
                      },
                      padding:[10,0,0,0]
                      //interval:xInterval
                  },
                  data: xData
              },
              yAxis: {
                  type: 'value',
                  axisTick: { show: false },
                  axisLine: {
                      show: true,
                      lineStyle: {
                          color: 'rgba(105, 115, 125, 0.3)',
                          width: 1, //这里是为了突出显示加上的
                          type:'dotted'
                      }
                  },
                  axisLabel: {
                      formatter:function(value){
                        return value?(value+'%'):0
                      },
                      show: true,
                      padding:[0,5,0,0],
                      textStyle: {
                          color: 'rgba(136,144,171,1)',
                          fontSize: 14
                      }
                  },
                  splitLine: {
                      lineStyle: {
                          color: 'rgba(105, 115, 125, 0.3)',
                          width: 1, //这里是为了突出显示加上的
                          type:'dotted'
                      }
                  },
              },
              series: [{
                  name: "完成率",
                  type: 'line',
                  smooth: true,
                  //areaStyle: { normal: {} },
                  symbol:"circle",
                  symbolSize:0,
                  itemStyle: {
                      normal: {
                          lineStyle:{
                              width:6,//折线宽度
                          },
                          color:"rgba(79, 191, 233, 1)"//折线颜色
                      },
                      emphasis: {
                          color: 'rgba(80, 115, 184, 1)'
                      },
                  },
                  markLine: {
                    itemStyle:{
                      normal:{
                        lineStyle:{
                          type:'solid',
                          color:'rgba(71, 207, 173, 1)',
                          width:2
                        },
                        label:{
                          show:true,
                          position:"middle",//'start' 线的起始点。'middle' 线的中点。'end' 线的结束点。
                          formatter:function(param){
                            return param.name+param.value+'%'
                          },
                          textStyle: {
                              fontSize: 16,
                          },
                        }
                      }
                    },
                    silent: false,
                    symbolSize:0,
                    data: [{
                        name: '平均值：',
                        yAxis: Average
                    }]
                  },
                  data: yData
              }]
            };
            that.$echarts.init(document.getElementById('finishRate_inspect')).setOption(option_echart, true);
        })
        Dao.getInspectPersonStatisticsForClient({
          orgId: that.formInline.orgIds,
          timeType: 13,
          planId: that.formInline.planId,
          startTime: that.formInline.time?(that.formInline.time[0].split(' ')[0]+' 00:00:00'):'',
          endTime: that.formInline.time?(that.formInline.time[1].split(' ')[0]+' 23:59:59'):'',
          timeCycle: 3,
          sortType: 1
        }).then((data)=>{
            that.loading = false
            let xData = []
            let yData = []
            let Mid = 0
            let Average = 0
            let Sum = 0
            let Min = 100
            let Max = 0
            $.each(data.data,(index,obj)=>{
              let _finishPercent = parseFloat(obj.finishCount) 
              xData.push(obj.accountName)
              yData.push(_finishPercent)
              /* Sum+=_finishPercent
              if(Max<_finishPercent){
                Max=_finishPercent;
              } 
              if(Min>_finishPercent){
                Min=_finishPercent;
              }  */
            })
            /* Min = Math.ceil(Min)
            Max = Math.ceil(Max)
            let l =  yData.length
            let n =  Math.floor(l/2)
            if (l%2==0){
                Mid = (yData[l/2-1]+yData[l/2])/2
            }else{
                Mid = yData[(l-1)/2]
            }
            Mid = Math.ceil(Mid)
            Average = l==0?0:( Math.ceil(Sum/l)) */
            //画图
            let option_echart = {
              title: {
                  textStyle: { color: '#2F3444', fontSize: '16' },
                  y: 'left',
                  left: '35',
                  top: '0',
                  text: '巡检员完成情况（点位巡检次数）',
              },
              grid: {
                  left: '55px',
                  right: '55px',
              },
              tooltip: {
                  trigger: 'axis',
                  formatter: "{b}<br/>完成数量: {c}次点位巡检",
                  axisPointer: { // 坐标轴指示器，坐标轴触发有效
                      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                  }
              },
              xAxis: {
                  type: 'category',
                  axisTick: {
                      show: false
                  },
                  triggerEvent: true,
                  axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(105, 115, 125, 1)',
                        width: 1, //这里是为了突出显示加上的
                    }
                  },
                  axisLabel: {
                      show: true,
                      textStyle: {
                          color: 'rgba(95, 104, 132, 1)',
                          fontSize: 14
                      },
                      //interval:xInterval
                  },
                  boundaryGap: true,
                  data: xData
              },
              yAxis: {
                  type: 'value',
                  axisTick: {
                      show: false
                  },
                  //interval:1,
                  /* min:0,
                  max:100, */
                  axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(105, 115, 125, 1)',
                        width: 1, //这里是为了突出显示加上的
                    }
                  },
                  axisLabel: {
                      /* formatter:function(value){
                        if(value == Max){
                          return 'max'
                        }else if(value == Min){
                          return 'min'
                        }else if(value == Average){//Mid
                          return 'mid'
                        }else{
                          return ''
                        }
                      }, */
                      show: true,
                      textStyle: {
                          color: 'rgba(95, 104, 132, 1)',
                          fontSize: 14
                      }
                  },
                  splitLine: {
                      show:false
                  },
                  axisPointer: {
                      snap: true
                  }
              },
              series: [{
                  name: "完成数量",
                  type: 'bar',
                  barMaxWidth: '128',
                  itemStyle: {
                    barBorderRadius:[4,4,0,0],
                    shadowColor: function(params) {
                        return that.colorList[params.dataIndex]
                    },
                    color: function(params) {
                        return that.colorList[params.dataIndex]
                    },
                  },
                  label: {
                    normal: {
                        show: false,
                        position: 'inside'
                    }
                  },
                  data: yData
              }]
            };
            that.$echarts.init(document.getElementById('inspectorRate_inspect')).setOption(option_echart, true);
        })
      }else{
        Dao.getOrgStatisticsForClient({
          orgIds: that.formInline.orgIds,
          timeType: 13,
          startTime: that.formInline.time?(that.formInline.time[0].split(' ')[0]+' 00:00:00'):'',
          endTime: that.formInline.time?(that.formInline.time[1].split(' ')[0]+' 23:59:59'):'',
          timeCycle: 3,
          sortType: 1,
          SortNum: 10
        }).then((data)=>{
            that.loading = false
            let xData = []
            let yData = []
            let Mid = 0
            let Average = 0
            let Sum = 0
            let Min = 100
            let Max = 0
            $.each(data.data,(index,obj)=>{
              let _finishPercent = parseFloat(obj.finishPercent) 
              xData.push(obj.orgName)
              yData.push(_finishPercent)
              /* Sum+=_finishPercent
              if(Max<_finishPercent){
                Max=_finishPercent;
              } 
              if(Min>_finishPercent){
                Min=_finishPercent;
              }  */
            })
            /* Min = Math.ceil(Min)
            Max = Math.ceil(Max)
            let l =  yData.length
            let n =  Math.floor(l/2)
            if (l%2==0){
                Mid = (yData[l/2-1]+yData[l/2])/2
            }else{
                Mid = yData[(l-1)/2]
            }
            Mid = Math.ceil(Mid)
            Average = l==0?0:( Math.ceil(Sum/l)) */
            //画图
            let option_echart = {
              title: {
                  textStyle: { color: '#2F3444', fontSize: '16' },
                  y: 'left',
                  left: '35',
                  top: '0',
                  text: '业主单位巡检完成率TOP10',
              },
              grid: {
                  left: '55px',
                  right: '55px',
              },
              tooltip: {
                  trigger: 'axis',
                  formatter: "{b}<br/>日均完成率: {c}%",
                  axisPointer: { // 坐标轴指示器，坐标轴触发有效
                      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                  }
              },
              xAxis: {
                  type: 'category',
                  axisTick: {
                      show: false
                  },
                  triggerEvent: true,
                  axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(105, 115, 125, 1)',
                        width: 1, //这里是为了突出显示加上的
                    }
                  },
                  axisLabel: {
                      show: true,
                      textStyle: {
                          color: 'rgba(95, 104, 132, 1)',
                          fontSize: 14
                      },
                      //interval:xInterval
                  },
                  boundaryGap: true,
                  data: xData
              },
              yAxis: {
                  type: 'value',
                  axisTick: {
                      show: false
                  },
                  //interval:1,
                  min:0,
                  max:100,
                  axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(105, 115, 125, 1)',
                        width: 1, //这里是为了突出显示加上的
                    }
                  },
                  axisLabel: {
                      formatter:function(value){
                        /* if(value == Max){
                          return 'max'
                        }else if(value == Min){
                          return 'min'
                        }else if(value == Average){//Mid
                          return 'mid'
                        }else{
                          return ''
                        } */
                          return value+'%'
                      },
                      show: true,
                      textStyle: {
                          color: 'rgba(95, 104, 132, 1)',
                          fontSize: 14
                      }
                  },
                  splitLine: {
                      show:false
                  },
                  axisPointer: {
                      snap: true
                  }
              },
              series: [{
                  name: "日均完成率",
                  type: 'bar',
                  barMaxWidth: '128',
                  itemStyle: {
                    barBorderRadius:[4,4,0,0],
                    shadowColor: function(params) {
                        return that.colorList[params.dataIndex]
                    },
                    color: function(params) {
                        return that.colorList[params.dataIndex]
                    },
                  },
                  label: {
                    normal: {
                        show: false,
                        position: 'inside'
                    }
                  },
                  data: yData
              }]
            };
            that.$echarts.init(document.getElementById('finishRate_inspectTop')).setOption(option_echart, true);
        })
      }
    },
  },
}
</script>
<style lang="scss" scoped>
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    .chart-heaad{
      height:25px;
      line-height:25px;
      font-size:18px;
      font-weight:500;
      color:rgba(68, 107, 222, 1);
      -webkit-text-stroke:1px rgba(68, 107, 222, 1);
      text-stroke:1px rgba(68, 107, 222, 1);
    }
    .chart-content{
      margin-top: 20px;
      height: 350px;
      width: 100%;
    }
  }
</style>